<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sfc后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <!-- <script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script> -->
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../lib/layui-v2.5.4/layui.js"></script>
    <style>
      #textarea-box {
        width: calc(100% - 110px);
        margin-right: 0;
      }
      .preview-box {
        display: none;
      }
      #preview {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <!-- 上传推荐新闻：标题/内容/封面 -->
        <div class="layui-form" lay-filter="form">
          <div class="layui-form-item">
            <label class="layui-form-label">*選擇類別</label>
            <div class="layui-input-block">
              <select name="category" id="category" lay-filter="category">

              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">*标题</label>
            <div class="layui-input-block">
              <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input" lay-filter="title">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">*封面</label>
            <div class="layui-input-inline">
              <button type="button" class="layui-btn" id="upload">
                <i class="layui-icon">&#xe67c;</i>上传图片
              </button>
            </div>
          </div>
          <div class="layui-form-item preview-box">
            <label class="layui-form-label">&nbsp;&nbsp;&nbsp;</label>
            <div class="layui-input-inline">
              <img id="preview">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">*内容</label>
            <div class="layui-input-inline" id="textarea-box">
              <textarea id="content" name="content" style="display: none;"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
              <button class="layui-btn" lay-submit="submit" lay-filter="formSubmit" id="submit">提交</button>
            </div>
          </div>
        </div>
      </div>
    </div>


    <script>
      window.onload = function() {

        getCate();

        var layer, form;
        var layedit, edit;
        var cover_img = '';
        var upload = null;
        var uploadInst = null;

        function initForm(data) {
          cover_img = data.cover_img;
          $('.preview-box').show();
          $('#preview').prop('src', cover_img);

          layui.use('upload', function() {
            upload = layui.upload;

            uploadInst = upload.render({
              elem: '#upload',
              url: 'http://localhost:3000/upload',
              done: function(res) {
                cover_img = res.data.src;
                $('.preview-box').show();
                $('#preview').prop('src', res.data.src);
              },
              error: function(err) {
                throw err;
              }
            });
          });

          layui.use('layedit', function() {
            layedit = layui.layedit;
            $("#content").text(data.content);

            layedit.set({
              uploadImage: {
                url: 'http://localhost:3000/upload',
                type: 'post'
              }
            });

            edit = layedit.build('content', {
              height: 400,
              tool: [
                'strong' //加粗
                , 'italic' //斜体
                , 'underline' //下划线
                , 'del' //删除线
                , '|' //分割线
                , 'left' //左对齐
                , 'center' //居中对齐
                , 'right' //右对齐
                , 'link' //超链接
                , 'image' //插入图片
              ]
            });
          });

          layui.use('layer', function() {
            layer = layui.layer;
          });
          layui.use('form', function() {
            form = layui.form;

            form.val("form", {
              "category": data.category_id,
              "title": data.title
            });
            let $id = data.id;
            form.on('submit(formSubmit)', function(data) {
              let postData = {
                id: $id,
                category_id: $('#category').val(),
                title: data.field.title,
                cover_img: cover_img,
                content: layedit.getContent(edit)
              }

              if (!postData.category_id || !postData.title || !postData.cover_img || !postData.content) {
                layer.msg('请填写完全');
                return;
              }

              editArticle(postData);

            });
          });
        }

        function getCate() {
          $.ajax({
            url: 'http://localhost:3000/getCate',
            type: 'get',
            success(res) {
              let str = '';
              for (let i in res.data) {
                str += '<option value="' + res.data[i].id + '">' + res.data[i].title + '</option>';
              }
              $('#category').append(str);

              // 同步數據
              getInfo();

            },
            fail() {
              layer.msg('獲取失败');
            }
          })
        }

        function getInfo() {
          let id = getQueryVariable('id');
          $.ajax({
            url: 'http://localhost:3000/getArticleById',
            type: 'get',
            data: {
              id: id
            },
            success(res) {
              initForm(res.data);
            },
            fail() {
              layer.msg('獲取失败');
            }
          })
        }

        function editArticle(postData) {
          $.ajax({
            url: 'http://localhost:3000/editArticle',
            type: 'post',
            dataType: 'json',
            data: postData,
            success(res) {
              if (res.code === 200) {
                layer.msg('修改成功');
                setTimeout(function() {
                  var index = window.parent.layer.getFrameIndex(window.name);
                  window.parent.layer.close(index);
                }, 1000);
              } else {
                layer.msg(res.msg);
              }
            },
            fail() {
              layer.msg('修改失败');
            }
          })
        }

        function getQueryVariable(variable) {
          var query = window.location.search.substring(1);
          var vars = query.split("&");
          for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
              return pair[1];
            }
          }
          return (false);
        }
      };
    </script>
  </body>
</html>
